<script lang="ts">
  export default {
    name: 'Cart',
  };
</script>

<script setup lang="ts">
  import { computed, onMounted, ref, reactive, nextTick, watch } from 'vue';
  import {
    showConfirmDialog,
    showToast,
    showLoadingToast,
    closeToast,
  } from 'vant';
  import { useRouter } from 'vue-router';
  import { useShopNav } from '@/store/modules/app';
  import { useI18n } from 'vue-i18n';
  import Address from '@/views/user/components/address.vue';
  import API_HOME from '@/apis/home'
  const { t } = useI18n();
  const appStore = useShopNav();
  const router = useRouter();
  let isMobile = ref(false)
  let from = reactive({
    email: '',
    phone: '',
    address: '',

  })
  const checked = ref('paypal');
  let rightCell = ref('')


  // 优惠券部分
  let coupons = ref([])

  // 不可用优惠券列表
  let disabledCoupons = ref([])
  onMounted(() => {
    window.addEventListener('resize', checkDevice);
    checkDevice(); // 初始检测
    getOrderCoupons()
  })
  // 检测设备函数
  const checkDevice = () => {
    isMobile.value = window.innerWidth <= 768;
  };

  // 获取优惠券列表
  let getOrderCoupons = async () => {
    await appStore.getCouponsList()
    coupons.value = computed(() => appStore.getCoupons).value.can_use
    disabledCoupons.value = computed(() => appStore.getCoupons).value.cannot_use
    rightCell.value = `${coupons.value.length}${t('home.Coupons')}`
  }

  const showList = ref(false);
  const chosenCoupon = ref(-1);

  const onChange = (index) => {
    console.log(index, '索引');
    if (index == null) {
      rightCell.value = `${coupons.value.length}${t('home.Coupons')}`
      appStore.setCouponsId('')
    } else {
      rightCell.value = `-${coupons.value[index].amount}`
      appStore.setCouponsId(coupons.value[index].id)
    }

    showList.value = false;
    chosenCoupon.value = index;
    appStore.getCarCheckList()
  };

  // 提交订单
  let onSubmit = async () => {
    // 创建订单
    appStore.submitOrder().then((res) => {
      router.replace({
        path: '/checkout',
        query: {
          id: res.order_sn
        }
      })
    })


  }
  let checkedInfo = computed(() => appStore.getOrderCalc)
  let goodsNum = computed(() => appStore.getTotal_Numer)
</script>

<template>
  <div>
    <Shop_headers></Shop_headers>
    <div class="shopContainer">
      <div class="PaymentBox">
        <div class="left">
          <Shop_Cart_Check :isCheckout="false"></Shop_Cart_Check>
        </div>
        <div class="right">
          <!-- 地址信息 -->
          <div class="addressBox">
            <Address></Address>
          </div>
          <!-- 结算页 -->
          <div style="margin-top: 20px;">
            <div class="tit">
              {{t('home.Amount')}}
            </div>
            <div class="order_info">
              <div class="row">
                <span>{{t('home.ProductAmount')}}:</span>
                <span>${{ checkedInfo.order_amount}}</span>
              </div>
              <div>
                <!-- 优惠券单元格 -->
                <van-coupon-cell :title="coupons?.name?coupons.name:t('home.coupon')" currency="$" :coupons="coupons"
                  :chosen-coupon="chosenCoupon" @click="showList = true" :value="rightCell">

                </van-coupon-cell>
                <!-- 优惠券列表 -->
                <van-popup v-model:show="showList" round :position="isMobile?'bottom':'right'"
                  :style="isMobile ? { height: '70%', width: '100%' } : { width: '30%' } ">
                  <!-- <van-coupon-list :show-exchange-bar="false" :coupons="coupons" :chosen-coupon="chosenCoupon"
                    :disabled-coupons="disabledCoupons" enabled-title="可用a" disabled-title="不可用a"
                    close-button-text="不使用a" @change="onChange" /> -->
                  <div>
                    <Shop_coupons_list :coupons="coupons" :disabledCoupons="disabledCoupons" @change="onChange">
                    </Shop_coupons_list>
                  </div>
                </van-popup>
              </div>
              <van-divider />
              <div class="row"><span>{{t('home.common')}}{{goodsNum}}{{t('home.pieces')}}</span>
                {{t('cart.Total')}}:<span style="color: red;">${{checkedInfo.pay_fee}}</span>
              </div>
            </div>
          </div>
          <!-- 支付方式 -->
          <div>
            <span class="tit">
              {{t('cart.Payment')}}
            </span>
            <!-- <div class="Payway">
              <div class="lePay">
                <img src="@/assets/shop/paypal.png" style="width: 26px;height: 26px;" alt="">

                <span style="margin-left: 10px;">paypal</span>
              </div>
              <div>
                <van-radio name="paypal" v-model="checked"></van-radio>
              </div>
            </div>
            <div class="Payway">
              <div class="lePay">
                <img src="@/assets/shop/USDT.png" style="width: 26px;height: 26px;" alt="">
                <span style="margin-left: 10px;">USDT</span>
              </div>
              <div>
                <van-radio name="usdt" v-model="checked"></van-radio>
              </div>
            </div> -->
            <div class="formSubmit">
              <van-button round block type="primary" native-type="submit" @click="onSubmit">
                {{t('cart.PaymentNow')}}
              </van-button>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .PaymentBox {
    display: flex;
    justify-content: space-between;


    .right {
      margin: 10px;
      width: 50%;

      .form {
        border: 1px solid #f0eded;
        margin: 20px 0;
      }

      .tit {
        font-weight: 700;
        font-size: 18px;
        padding: 0 8px;
      }

      .titLog {
        color: #666;
        cursor: pointer;
        size: 12px;
      }

      .formSubmit {
        padding: 20px;
      }

      .Payway {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;

        .lePay {
          display: flex;
          align-items: center;
        }
      }

      .order_info {
        /* box-shadow: 0px 0px 5px 0px #ccc; */
        border-radius: 5px;
        margin: 10px 0;
        padding: 16px;

        .row {
          padding: 0 14px;
          font-weight: 700;

        }
      }
    }

    .left {
      width: 50%;

    }
  }

  @media screen and (max-width: 450px) {
    .PaymentBox {
      display: flex;
      flex-direction: column;

      .left {
        width: 100%;
      }

      .right {
        width: 100%;
      }
    }
  }
</style>